<template>
  <el-dialog :title="title" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :visible.sync="visible" :width="'480px'">
    <el-form :model="priceForm" :ref="priceForm" label-width="100px" size="small">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="模板名称" required>
            <el-input size="small" v-model.trim="priceForm.name" placeholder="请输入模板名称" maxlength="30" show-word-limit @input="watchInput"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="价格类型" required>
            <el-checkbox-group v-model.trim="priceForm.selectionPrice">
              <el-checkbox v-for="(item, index) in typeDataList" :label="index" :key="item.priceName">{{ item.priceName }}
                <el-tooltip class="item" effect="dark" :content="item.remark" placement="right">
                  <i class="el-icon-question"></i>
                </el-tooltip>      
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="价格限制">
                <template v-if="priceForm.limit && priceForm.limit.length">
                    <el-row v-for="(item, index) of priceForm.limit" :key="'limit' + index" >
                        <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
                            <el-input-number size="small" v-model.trim="item.startNum" placeholder="请输入价格" :precision="2" :min="0" :max="9999"></el-input-number>
                        </el-col>
                        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                            <div class="text-center">></div>
                        </el-col>
                        <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
                            <el-input-number size="small" v-model.trim="item.endNum" placeholder="请输入价格" :precision="2" :min="0" :max="9999"></el-input-number>
                        </el-col>
                    </el-row>
                </template>
                <div class="margin_top_20"><el-button @click="addValueItem()">添加限制</el-button></div>
            </el-form-item>
          </el-col> -->
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelModel()">取 消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="closeModel()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { UpdatePriceList } from '@/views/store-management/services/index'
export default {
  props: ['visible', 'title', 'price'],
  data() {
    return {
      priceForm: {
        id: '',
        status: '1',
        name: '',
        selectionPrice: [],
        // limit: [{ id: '', startNum: 0, endNum: 0 }]
      },
      submitLoading: false,
      typeDataList: [
        { priceName: '采购价', fieldName: 'costPrice', remark: '含税运供应商结算价' },
        { priceName: 'B端销售价', fieldName: 'supplyPrice', remark: '销售给B端客户价格' },
        { priceName: '最低售价', fieldName: 'minPrice', remark: '控价' },
        { priceName: 'C端售价', fieldName: 'suggestedPrice', remark: '市场零售价' },
        { priceName: '市场价', fieldName: 'marketPrice', remark: '吊牌价、划线价' },
      ],
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newValue) {
        if (newValue === true && this.price) {
          this.renderItem(this.price)
        }
      },
    },
  },

  methods: {
    watchInput(event) {
      this.priceForm.name = this.inputReplaceSpecialChar(event)
    },
    addValueItem() {
      this.priceForm.limit.push({
        id: '',
        startNum: 0,
        endNum: 0,
      })
    },
    //对价格模板进行渲染
    renderItem(item) {
      this.priceForm.name = item.name
      this.priceForm.id = item.id
      this.priceForm.status = item.status
      this.priceForm.selectionPrice = eval(item.selectionPrice).map(item => this.typeDataList.findIndex(child => child.fieldName == item.fieldName))
    },
    //触发取消按钮
    cancelModel() {
      this.priceForm.name = ''
      this.priceForm.selectionPrice = []
      this.$emit('update:visible', false)
    },
    closeModel() {
      if (!this.priceForm.name) {
        this.$message.warning('请输入模板名称!')
        return
      }
      if (!this.priceForm.selectionPrice || !this.priceForm.selectionPrice.length) {
        this.$message.warning('请至少选择一项价格类型!')
        return
      }
      this.submitLoading = true
      if (this.title == '新建价格模板') {
        delete this.priceForm.id
      }
      UpdatePriceList({
        id: this.priceForm.id,
        name: this.priceForm.name,
        selectionPrice: JSON.stringify(this.priceForm.selectionPrice.map(item => this.typeDataList[Number(item)])),
        status: this.priceForm.status,
      })
        .finally(() => (this.submitLoading = false))
        .then(data => {
          if (data.code == 200) {
            this.$message.success('操作成功!')
          } else {
            this.$message.error('操作失败!')
          }

          this.$emit('update:visible', false)
          this.priceForm.name = ''
          this.priceForm.selectionPrice = []
          this.$emit('update')
        })
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox  {
   display: block;
}
</style>
